<template>
  <div>
    <el-table
      :data="permissionList"
      row-key="id"
      border
      :expand-row-keys="['1']"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column label="菜单权限值">
        <template v-slot="{ row }">
          <span v-if="row.level === 2 || row.level === 3">{{ row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="按钮权限值">
        <template v-slot="{ row }">
          <span v-if="row.level === 4">{{ row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            :disabled="row.level === 4"
            type="primary"
            @click="showSavePermission(row)"
          >
            添加
          </el-button>
          <el-button :disabled="row.level === 1" type="warning">修改</el-button>
          <el-button
            :disabled="row.level === 1"
            type="danger"
            @click="removePermission(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加菜单" :visible.sync="visible">
      <el-form label-width="100px">
        <el-form-item label="菜单名称">
          <el-input v-model="permissionForm.name" />
        </el-form-item>
        <el-form-item v-if="permissionForm.level !== 4" label="权限值">
          <el-input v-model="permissionForm.code" />
        </el-form-item>
        <el-form-item v-else label="按钮权限值">
          <el-input v-model="permissionForm.code" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addPermission">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Permission',
  data() {
    return {
      permissionList: [],
      visible: false,
      permissionForm: {
        pid: '',
        name: '',
        code: '',
        level: ''
      }
    }
  },
  async mounted() {
    this.getPermissionList()
  },
  methods: {
    // 删除菜单
    async removePermission(id) {
      await this.$API.acl.permission.removePermission(id)
      this.getPermissionList()
      this.$message.success('删除菜单成功')
    },
    // 获取菜单列表
    async getPermissionList() {
      const result = await this.$API.acl.permission.getPermissionList()
      this.permissionList = result.data.children
    },
    // 显示添加菜单modal
    showSavePermission(row) {
      this.visible = true
      this.permissionForm.pid = row.id
      this.permissionForm.level = row.level + 1
    },
    // 添加菜单
    async addPermission() {
      // level 菜单等级
      // pid 父级菜单id
      // code 权限值或按钮权限值
      // name 菜单名称
      await this.$API.acl.permission.savePermission(this.permissionForm)
      this.getPermissionList()
      this.$message.success('添加菜单成功')
      this.cancel()
    },
    cancel() {
      this.visible = false
      this.permissionForm = {
        pid: '',
        name: '',
        code: '',
        level: ''
      }
    }
  }
}
</script>

<style>
</style>
